<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/head :: commonHead('添加风险响应计划')">
    <!-- 页面特定样式将由通用头部替代 -->
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>添加风险响应计划</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/}" class="text-decoration-none">首页</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/list}" class="text-decoration-none">风险列表</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/{id}(id=${risk.id})}" class="text-decoration-none">风险详情</a></li>
                        <li class="breadcrumb-item active" aria-current="page">添加响应计划</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">响应计划信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="message-area"></div>
                        
                        <form id="responseForm">
                            <input type="hidden" id="riskId" th:value="${risk.id}">
                            
                            <div class="form-group">
                                <label>相关风险:</label>
                                <input type="text" class="form-control" th:value="${risk.title}" readonly>
                            </div>
                            
                            <div class="form-group">
                                <label for="name">响应计划名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" placeholder="请输入响应计划名称" required>
                            </div>
                            
                            <div class="form-group">
                                <label for="strategy">响应策略 <span class="text-danger">*</span></label>
                                <select class="form-control" id="strategy" required>
                                    <option value="">-- 请选择响应策略 --</option>
                                    <option value="1">规避</option>
                                    <option value="2">转移</option>
                                    <option value="3">减轻</option>
                                    <option value="4">接受</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="description">响应计划描述 <span class="text-danger">*</span></label>
                                <textarea class="form-control" id="description" rows="3" placeholder="请详细描述应对措施和具体实施步骤" required></textarea>
                            </div>
                            
                            <div class="form-group">
                                <label for="responsibleId">负责人 <span class="text-danger">*</span></label>
                                <select class="form-control" id="responsibleId" required>
                                    <option value="">-- 请选择负责人 --</option>
                                    <option th:each="user : ${users}" th:value="${user.id}" th:text="${user.realName}" 
                                            th:selected="${risk.ownerId != null && risk.ownerId == user.id}"></option>
                                </select>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="expectedStartTime">计划开始时间 <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control" id="expectedStartTime" required>
                                </div>
                                
                                <div class="form-group col-md-6">
                                    <label for="expectedEndTime">计划结束时间 <span class="text-danger">*</span></label>
                                    <input type="datetime-local" class="form-control" id="expectedEndTime" required>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="status">状态</label>
                                <select class="form-control" id="status">
                                    <option value="1" selected>未开始</option>
                                    <option value="2">进行中</option>
                                    <option value="3">已完成</option>
                                </select>
                            </div>
                            
                            <div class="text-right">
                                <a th:href="@{/risk/{id}(id=${risk.id})}" class="btn btn-secondary">
                                    <i class="fa fa-arrow-left"></i> 返回风险详情
                                </a>
                                <button type="button" id="submitBtn" class="btn btn-primary">
                                    <i class="fa fa-save"></i> 保存
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">帮助信息</h5>
                    </div>
                    <div class="card-body">
                        <p><i class="fa fa-info-circle text-info"></i> <strong>响应计划名称：</strong>简短明确的计划标题</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>响应策略：</strong>选择应对风险的基本策略（规避、转移、减轻或接受）</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>响应计划描述：</strong>详细描述如何应对风险的具体措施和步骤</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>负责人：</strong>负责执行响应计划的团队成员</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>计划开始/结束时间：</strong>预期的实施时间范围</p>
                        <p><i class="fa fa-info-circle text-info"></i> <strong>状态：</strong>表示响应计划当前所处的执行阶段</p>
                    </div>
                </div>
                
                <div class="card mt-3">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">风险信息</h5>
                    </div>
                    <div class="card-body">
                        <p><strong>风险标题：</strong> <span th:text="${risk.title}"></span></p>
                        <p><strong>风险类型：</strong> 
                            <span th:if="${risk.type == 1}">技术风险</span>
                            <span th:if="${risk.type == 2}">管理风险</span>
                            <span th:if="${risk.type == 3}">商业风险</span>
                            <span th:if="${risk.type == 4}">外部风险</span>
                        </p>
                        <p><strong>风险级别：</strong> 
                            <span th:if="${risk.level == 1}">低</span>
                            <span th:if="${risk.level == 2}">中</span>
                            <span th:if="${risk.level == 3}">高</span>
                        </p>
                        <p><strong>风险状态：</strong> 
                            <span th:if="${risk.status == 1}" class="badge badge-secondary">已识别</span>
                            <span th:if="${risk.status == 2}" class="badge badge-primary">已分析</span>
                            <span th:if="${risk.status == 3}" class="badge badge-info">已计划</span>
                            <span th:if="${risk.status == 4}" class="badge badge-warning">已处理</span>
                            <span th:if="${risk.status == 5}" class="badge badge-success">已解决</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        $(document).ready(function() {
            // 默认设置当前时间为计划开始时间
            const now = new Date();
            const formattedNow = now.toISOString().slice(0, 16);
            $('#expectedStartTime').val(formattedNow);
            
            // 设置默认结束时间为7天后
            const oneWeekLater = new Date(now);
            oneWeekLater.setDate(now.getDate() + 7);
            const formattedOneWeekLater = oneWeekLater.toISOString().slice(0, 16);
            $('#expectedEndTime').val(formattedOneWeekLater);
            
            // 表单提交
            $('#submitBtn').click(function() {
                // 验证表单
                if (!validateForm()) {
                    return;
                }
                
                // 禁用按钮防止重复提交
                const $btn = $(this);
                $btn.prop('disabled', true);
                $btn.html('<i class="fa fa-spinner fa-spin"></i> 提交中...');
                
                // 构建数据
                const responseData = {
                    riskId: $('#riskId').val(),
                    name: $('#name').val(),
                    strategy: $('#strategy').val(),
                    measure: $('#description').val(),
                    responsibleId: $('#responsibleId').val(),
                    planStartTime: new Date($('#expectedStartTime').val()).toISOString(),
                    planEndTime: new Date($('#expectedEndTime').val()).toISOString(),
                    status: $('#status').val()
                };
                
                // 发送AJAX请求
                $.ajax({
                    url: '/risk-management/risk-response/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(responseData),
                    success: function(response) {
                        if (response.code === 200) {
                            showMessage('响应计划添加成功，即将跳转到风险详情页...', 'success');
                            setTimeout(function() {
                                window.location.href = '/risk-management/risk/' + $('#riskId').val();
                            }, 2000);
                        } else {
                            showMessage(response.message || '响应计划添加失败', 'danger');
                            $btn.prop('disabled', false);
                            $btn.html('<i class="fa fa-save"></i> 保存');
                        }
                    },
                    error: function(xhr) {
                        var errorMsg = '系统错误，请稍后再试';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        showMessage(errorMsg, 'danger');
                        $btn.prop('disabled', false);
                        $btn.html('<i class="fa fa-save"></i> 保存');
                    }
                });
            });
        });
        
        // 验证表单
        function validateForm() {
            // 验证必填项
            if (!$('#name').val().trim()) {
                showMessage('请输入响应计划名称', 'warning');
                $('#name').focus();
                return false;
            }
            
            if (!$('#strategy').val()) {
                showMessage('请选择响应策略', 'warning');
                $('#strategy').focus();
                return false;
            }
            
            if (!$('#description').val().trim()) {
                showMessage('请输入响应计划描述', 'warning');
                $('#description').focus();
                return false;
            }
            
            if (!$('#responsibleId').val()) {
                showMessage('请选择负责人', 'warning');
                $('#responsibleId').focus();
                return false;
            }
            
            if (!$('#expectedStartTime').val()) {
                showMessage('请选择计划开始时间', 'warning');
                $('#expectedStartTime').focus();
                return false;
            }
            
            if (!$('#expectedEndTime').val()) {
                showMessage('请选择计划结束时间', 'warning');
                $('#expectedEndTime').focus();
                return false;
            }
            
            // 验证时间是否合理
            const startTime = new Date($('#expectedStartTime').val());
            const endTime = new Date($('#expectedEndTime').val());
            
            if (endTime <= startTime) {
                showMessage('计划结束时间必须晚于开始时间', 'warning');
                $('#expectedEndTime').focus();
                return false;
            }
            
            return true;
        }
        
        // 显示消息
        function showMessage(message, type) {
            const alertClass = 'alert-' + (type || 'info');
            const html = '<div class="alert ' + alertClass + ' alert-dismissible fade show">' +
                         message +
                         '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                         '<span aria-hidden="true">&times;</span></button></div>';
            $('#message-area').html(html);
            // 滚动到消息区域
            $('html, body').animate({
                scrollTop: $('#message-area').offset().top - 100
            }, 200);
        }
    </script>
</body>
</html> 